GodTier.Views['createTournamentView'] = Backbone.View.extend( {

    makeEl: GodTier.CommonLib.makeEl,

    initialize: function() {

        this.render();
       
        this.delegateEvents( this.steps[ this.currentStepIndex ].events );

        return this;
    },

    render: function() {

        this.stepContainer =
            this.makeEl( 'div' ).css( { 'overflow': 'auto',
                                        'border': '1px solid black' } )

        this.pageSubHeader =
            this.makeEl( 'div' ).text( 'Create Tournament' )
                                .css( { 'text-align': 'center', 'padding': '4em 2em 2em 2em' } );

        this.$el.height( this.options.containerHeight ).append(
            this.pageSubHeader,
            this.stepContainer );

        this.stepNavButtons =
            this.makeEl( 'div' ).append(
                this.makeEl( 'div' ).attr( { 'id': 'backButton', 'class': 'cursorHand' } )
                                    .css( { 'position': 'relative', 'float': 'left' } )
                                    .text( ' < ' ),
                this.makeEl( 'div' ).attr( { 'id': 'forwardButton', 'class': 'cursorHand' } )
                                    .css( { 'position': 'relative', 'float': 'left' } )
                                    .text( ' > ' ),
                this.makeEl( 'div' ).css( { 'clear': 'both' } ) );

        this.steps = this.makeSteps();

        this.currentStepIndex = 0

        this.stepContainer.append( this.steps[ this.currentStepIndex ].content );

        for( var i = 1, ii = this.steps.length; i < ii; i++ ) {

            this.stepContainer.append( this.steps[ i ].content.hide() );
        }

        this.stepContainer.append( this.stepNavButtons );


        this.positionNavButtons();
        
        this.sizeStepContainer();
        
        $('#tournamentDate').datepicker( { dateFormat: "yy-mm-dd" } );

        var that = this;

        $('#tournamentTime').timepickr( {
            top: 20,
            select: function() { that.updateTournamentModel( { target: $(this) } ); },
            hoverIntent: true,   } );

        /*
        option list
        banner,
        public, private
        divisions allowed ( only for 1v1 ? )
        public replays
        max players
        seeding
        entry fee
        date time
        check in
        map selection
        format
        admins
        text description
        single, double elim
        stream link
        */

        return this;
    },

    makeSteps: function() {

        return [
           
            {   name: 'basics',

                events: {
                    'change #publicCheckbox': 'publicCheckboxChange',
                    'click #privateSettings': 'showPrivateSettings',
                    'click #forwardButton': 'forwardClick',
                    'change .tournamentField': 'updateTournamentModel',
                },
       
                content:

                    this.makeEl('div').append(
                        this.makeEl('div').text( 'Teh Basiks' )
                                          .css( { 'text-align': 'center', 'padding': '2em' } ),
                        this.makeEl( 'div' ).append(
                            this.makeEl( 'div' ).css( { 'float': 'left',
                                                        'padding': '1em' } ).text( 'Tournament Name : ' ),
                            this.makeEl( 'input' ).attr( { 'id': 'tournamentName',
                                                           'class': 'tournamentField',
                                                           'modelAttr': 'name',
                                                           'type': 'text' } )
                                                  .css( { 'margin': '1em' } ),
                            this.makeEl( 'div' ).css( { 'clear': 'both' } ) ),
                        this.makeEl( 'div' ).append(
                            this.makeEl( 'div' ).css( { 'float': 'left',
                                                        'padding': '1em' } ).text( 'Start Date : ' ),
                            this.makeEl( 'div' ).css( { 'float': 'left' } ).append(
                                this.makeEl( 'input' ).attr( { 'type': 'text',
                                                               'class': 'tournamentField',
                                                               'modelAttr': 'tournamentDate',
                                                               'id': 'tournamentDate' } )
                                                      .css( { 'margin': '1em' } ) ),
                            this.makeEl( 'div' ).css( { 'float': 'left',
                                                        'padding': '1em' } ).text( 'Time : ' ),
                            this.makeEl( 'div' ).css( { 'float': 'left',
                                                        'padding': '1em' } ).append(
                                this.makeEl( 'input' ).attr( { 'type': 'text',
                                                               'class': 'tournamentField',
                                                               'modelAttr': 'tournamentTime',
                                                               'id': 'tournamentTime' } )
                                                      .css( { 'margin': '' } ) ),
                            this.makeEl( 'div' ).css( { 'float': 'left',
                                                        'padding': '1em' } ).text( jstz.determine().name() ),
                            this.makeEl( 'div' ).css( { 'clear': 'both' } ) ),
                        this.makeEl( 'div' ).append(
                            this.makeEl( 'div' ).css( { 'float': 'left', 'padding': '1em' } ).text( 'Open to the public ? : ' ),
                            this.makeEl( 'div' ).css( { 'float': 'left', 'padding': '1em' } ).append(
                            this.makeEl( 'input' ).attr( { 'id': 'publicCheckbox', 'type': 'checkbox', 'checked': 'true' } )
                                                  .css( { 'vertical-align': 'middle'  } ) ),
                            this.makeEl( 'div' ).attr( { 'id': 'divisionsAllowed' } )
                                                .css( { 'padding': '1em', 'float': 'left' } ).append(
                                this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).text( 'Divisions Allowed : ' ),
                                this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).append( 
                                    this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).text( 'GM' ),
                                    this.makeEl( 'input' ).attr( { 'id': 'gmCheckbox', 'type': 'checkbox', 'checked': 'true' } ) ),
                                this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).append( 
                                    this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).text( 'Master' ),
                                    this.makeEl( 'input' ).attr( { 'id': 'masterCheckbox', 'type': 'checkbox', 'checked': 'true' } ) ),
                                this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).append( 
                                    this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).text( 'Diamond' ),
                                    this.makeEl( 'input' ).attr( { 'id': 'diamondCheckbox', 'type': 'checkbox', 'checked': 'true' } ) ),
                                this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).append( 
                                    this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).text( 'Platinum' ),
                                    this.makeEl( 'input' ).attr( { 'id': 'platinumCheckbox', 'type': 'checkbox', 'checked': 'true' } ) ),
                                this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).append( 
                                    this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).text( 'Gold' ),
                                    this.makeEl( 'input' ).attr( { 'id': 'goldCheckbox', 'type': 'checkbox', 'checked': 'true' } ) ),
                                this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).append( 
                                    this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).text( 'Silver' ),
                                    this.makeEl( 'input' ).attr( { 'id': 'silverCheckbox', 'type': 'checkbox', 'checked': 'true' } ) ),
                                this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).append( 
                                    this.makeEl( 'div' ).css( { 'padding': '1em', 'float': 'left' } ).text( 'Bronze' ),
                                    this.makeEl( 'input' ).attr( { 'id': 'bronzeCheckbox', 'type': 'checkbox', 'checked': 'true' } ) ) ),
                            this.makeEl( 'div' ).attr( { 'id': 'publicReplayContainer' } ).append(
                                this.makeEl( 'div' ).css( { 'float': 'left', 'padding': '1em' } ).text( 'Public Replays : ' ),
                                this.makeEl( 'div' ).css( { 'float': 'left', 'padding': '1em' } ).append(
                                this.makeEl( 'input' ).attr( { 'id': 'publicReplayCheckbox', 'type': 'checkbox', 'checked': 'true' } )
                                                      .css( { 'vertical-align': 'middle'  } ) ) ),
                            this.makeEl( 'div' ).attr( { 'class': 'cursorHand', 'id': 'privateSettings' } )
                                                .css( { 'padding': '1em', 'float': 'left' } ).text( 'Set private settings' ).hide(),
                            this.makeEl( 'div' ).css( { 'clear': 'both' } ) ),
                        this.makeEl( 'div' ).append(
                            this.makeEl( 'div' ).css( { 'float': 'left', 'padding': '1em' } ).text( 'Prize : ' ),
                            this.makeEl( 'input' ).attr( { 'id': 'tournamentPrize',
                                                           'class': 'tournamentField',
                                                           'modelAttr': 'prize',
                                                           'type': 'text' } )
                                                  .css( { 'margin': '1em' } ),
                            this.makeEl( 'div' ).css( { 'clear': 'both' } ) ) )
            },

            {   name: 'format',

                events: {
                    'click #backButton': 'backClick',
                    'click #forwardButton': 'forwardClick',
                    'change #eliminationOption': 'updateRoundDialogue',
                    'change #maxPlayers': 'updateRoundDialogue',
                    'change .tournamentField': 'updateTournamentModel',
                },

                content:

                    this.makeEl('div').append(
                        this.makeEl('div').text( '4m4t' )
                                          .css( { 'text-align': 'center', 'padding': '2em' } ),
                        this.makeEl( 'div' ).append(
                            this.makeEl( 'div' ).css( { 'float': 'left',
                                                        'padding': '1em' } ).text( 'Elimination : ' ),
                            this.makeEl( 'select' ).attr( { 'id': 'eliminationOption' } )
                                                   .css( { 'margin': '1em' } ).append(
                                this.makeEl('option').attr( { 'value': 'single' } ).text('Single'),
                                this.makeEl('option').attr( { 'value': 'double' } ).text('Double') ),
                            this.makeEl( 'div' ).css( { 'clear': 'both' } ) ),
                        this.makeEl( 'div' ).append(
                            this.makeEl( 'div' ).css( { 'float': 'left',
                                                        'padding': '1em' } ).text( 'Map Selection : ' ),
                            this.makeEl( 'select' ).attr( { 'id': 'mapSelectionOption' } )
                                                   .css( { 'margin': '1em' } ).append(
                                this.makeEl('option').attr( { 'value': 'loserpicks' } ).text(' Loser Picks'),
                                this.makeEl('option').attr( { 'value': 'loserDownvotesFirst' } ).text('Loser Downvotes First') ),
                            this.makeEl( 'div' ).css( { 'clear': 'both' } ) ),
                        this.makeEl( 'div' ).append(
                            this.makeEl( 'div' ).css( { 'float': 'left',
                                                        'padding': '1em' } ).text( 'Max Players : ' ),
                            this.makeEl( 'input' ).attr( { 'id': 'maxPlayers',
                                                           'class': 'tournamentField',
                                                           'modelAttr': 'maxPlayers',
                                                           'type': 'text' } )
                                                  .css( { 'margin': '1em' } ),
                            this.makeEl( 'div' ).css( { 'clear': 'both' } ) ),
                        this.makeEl( 'div' ).append(
                            this.makeEl( 'div' ).css( { 'float': 'left',
                                                        'padding': '1em' } ).text( 'Map Pool : ' ),
                            this.makeEl( 'textarea' ).attr( { 'id': 'mapPool',
                                                              'class': 'tournamentField',
                                                              'modelAttr': 'mapPool',
                                                              'rows': '5',
                                                              'cols': '50' } )
                                                     .css( { 'margin': '1em' } ),
                            this.makeEl( 'div' ).css( { 'clear': 'both' } ) ),
                        this.makeEl('div').attr( { 'id': 'roundDialogue' } ) )
            } ,

            {

                name: 'end',

                events: {
                    'click #backButton': 'backClick',
                    'click #createTournamentButton': 'createTournament',
                },

                content:

                    this.makeEl('div').attr( { 'id': 'createTournamentButton', 'class': 'cursorHand' } )
                                      .text( 'Create Tournament' )
                                      .width( $(window).width() / 3 )
                                      .height( '1em' )
                                      .css( { 'text-align': 'center',
                                              'position': 'relative',
                                              'left': ( this.stepContainer.outerWidth( true ) - ( $(window).width() / 3 ) ) / 2,
                                              'padding': '1em 1em',
                                              'border': '1px solid black',
                                              'font-size': '1.5em',
                                              'color': 'white',
                                              'background-color': 'LightGreen',
                                              'background': [ '-webkit-gradient(linear, left top, left bottom, from(',
                                                              'LightGreen',
                                                              '), to(',
                                                              'DarkGreen', '))' ].join(''),
                    'box-shadow': '0px 0px 2px #bababa, inset 0px 0px 1px #ffffff' } )
            }
        ]
    },

    publicCheckboxChange: function() {

        if( $('#publicCheckbox').is(':checked') ) {

            $('#privateSettings').hide();
            $('#publicReplayContainer').show();
            $('#divisionsAllowed').show();
            
        } else {

            $('#privateSettings').show();
            $('#publicReplayContainer').hide();
            $('#divisionsAllowed').hide();
        }
    },

    showPrivateSettings: function() {

        new GodTier.Views['modalBox']( { content: this.makeEl( 'div' ).text('Test') } );
    },

    createTournament: function() {

        this.options.tournamentModel.save( this.options.tournamentModel.attributes, { 
            success: function( model, response, options ) {
                window.location = GodTier.CommonLib.makeUrl( { controller: 'view', argList: [ 'tournament', response.id ] } ); 
            }
        } );
    },

    createTournamentSuccess: function() {

    },

    positionNavButtons: function() {

        var leftPosition = this.stepNavButtons.outerWidth( true ) / 3;

        $('#backButton').css( { 'left': leftPosition } );
        $('#forwardButton').css( { 'left': leftPosition * 2 } );
    },

    disableNavButton: function( p ) {

        $( [ '#', p.id ].join('') ).removeClass( 'cursorHand' )
                                   .css( { 'color': 'grey' } )
                                   .off( 'click' );
    },
   
    enableNavButton: function( p ) {

        $( [ '#', p.id ].join('') ).addClass( 'cursorHand' )
                                   .css( { 'color': 'black' } )
                                   .on( 'click', ( p.id == 'forwardButton' ) ? $.proxy( this.forwardClick, this ) : $.proxy( this.backClick, this ) );
    },

    forwardClick: function() {
       
        var that = this;

        this.undelegateEvents();

        this.currentStepIndex++;

        this.steps[ this.currentStepIndex - 1 ].content.hide( 'slide', function() { that.steps[ that.currentStepIndex ].content.show( 'slide' ); } );

        this.delegateEvents( this.steps[ this.currentStepIndex ].events );
    },

    backClick: function() {

        var that = this;

        this.undelegateEvents();

        this.currentStepIndex--;

        this.steps[ this.currentStepIndex + 1 ].content.hide( 'slide', function() { that.steps[ that.currentStepIndex ].content.show( 'slide' ); } );

        this.delegateEvents( this.steps[ this.currentStepIndex ].events );
    },

    updateRoundDialogue: function() {

        var numberOfRounds = Math.ceil( GodTier.CommonLib.logWithBase( $('#maxPlayers').val(), 2 ) );
        
        $('#roundDialogue').empty();

        for( var i = 0, ii = numberOfRounds; i < ii; i++ ) {

            $('#roundDialogue').append(
                this.makeEl( 'div' ).append(
                    this.makeEl( 'div' ).css( { 'float': 'left' } ).text( ( i == 0 ) ? 'Finals' : 'Round of ' + Math.pow( 2, ( i + 1 ) ) ), 
                    this.makeEl( 'div' ).css( { 'float': 'left' } ).append(
                        this.makeEl( 'select' ).append(
                            this.makeEl('option').attr( { 'value': 'bo1' } ).text('Best of 1'),
                            this.makeEl('option').attr( { 'value': 'bo1' } ).text('Best of 3'),
                            this.makeEl('option').attr( { 'value': 'bo1' } ).text('Best of 5'),
                            this.makeEl('option').attr( { 'value': 'bo1' } ).text('Best of 7'),
                            this.makeEl('option').attr( { 'value': 'bo1' } ).text('Best of 9') ) ),
                    this.makeEl( 'div' ).css( { 'float': 'left' } ).append(
                        this.makeEl( 'input' ).attr( { 'type': 'text' } ).val( 'Starting Map' ) ),
                    this.makeEl( 'div' ).css( { 'clear': 'both' } ) ) );
        } 
    },

    sizeStepContainer: function() {

        this.stepContainer.css( { 'max-height' :this.$el.outerHeight( true ) - this.pageSubHeader.outerHeight( true ) } );
    },

    updateTournamentModel: function( e ) {

        this.options.tournamentModel.set( $( e.target ).attr('modelAttr'), $( e.target ).val() );
    }
    
} );
